<template>
	<view class="search-history-container">
		<view class="search-history-title-box">
			<view class="search-history-title">搜索历史</view>
			<view v-if="!isShowClear">
				<uni-icons type="trash" @click="isShowClear = true" />
			</view>
			<view v-else>
				<text class="txt" @click="onClearAll">全部删除</text>
				<text class="txt" @click="isShowClear = false">完成</text>
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="search-history-box">
			<block v-for="(item, index) in searchData" :key='index'>
				<view class="search-history-item" @click="onHistoryItemClick(item, index)">
					<text class="history-txt line-clamp nowrap">{{ item }}</text>
					<uni-icons v-show="isShowClear" type="clear" />
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		name: "search-history",
		data() {
			return {
				isShowClear: false
			};
		},
		methods: {
			...mapMutations('search', ['removeAllSearchData', 'removeSearchData']),
			onHistoryItemClick(item, index) {
				this.removeSearchData(index);
			},
			onClearAll() {
				uni.showModal({
					title: "这是测试",
					content: '删除搜索历史记录？',
					showCancel: true,
					success: ({ confirm, cancel }) => {
						if (confirm) {
							// 删除 searchData
							this.removeAllSearchData()
							this.isShowClear = false
						}
					}
				})
			}
		},
		computed: {
			...mapState('search', ['searchData'])
		}
	}
</script>

<style lang="scss" scoped>
	.search-history-container {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;

		.search-history-title-box {
			display: flex;
			justify-content: space-between;

			.search-history-title {
				font-size: $uni-font-size-sm;
				color: $uni-text-color;
				padding: $uni-spacing-col-sm $uni-spacing-row-sm;
			}

			.txt {
				color: $uni-text-color-grey;
				font-size: $uni-font-size-sm;
				padding: $uni-spacing-col-sm $uni-spacing-row-sm;
			}
		}

		.search-history-box {
			display: flex;
			flex-wrap: wrap;
			margin-top: $uni-spacing-col-lg;

			.search-history-item {
				flex: 50%;
				box-sizing: border-box;
				padding: $uni-spacing-col-base $uni-spacing-row-base;
				position: relative;

				.history-txt {
					color: $uni-text-color;
					font-size: $uni-font-size-base;
					padding: $uni-spacing-sm;
				}
			}

			.search-history-item:nth-child(odd):after {
				content: ' ';
				position: absolute;
				right: 0;
				top: 50%;
				height: 10px;
				transform: translateY(-50%);
				border-left: 1px solid #999;
			}
		}
	}
</style>
